/* ---------- 通用遮罩 ---------- */
.loading {
    position:          fixed;
    left:              0;
    right:             0;
    bottom:            0;
    top:               0;
    z-index:           1032;
    background:        rgba(0, 0, 0, 0.8);
    display:           flex;
    align-items:       center;
    flex-direction:    column;
    opacity:           0;
    transition:        0.25s;
}
.loading.active {
    opacity:    1;
}

.loader {
    position: relative;
    top: 50%;
    margin-top: -100px;
}

.ball-spin-fade-loader {
    display: block
}

.ball-spin-fade-loader>div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
}

.ball-spin-fade-loader>div:nth-child(1) {
    top: 25px;
    left: 0;
    animation: ball-spin-fade-loader 1s 0s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    animation: ball-spin-fade-loader 1s 0.12s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(3) {
    top: 0;
    left: 25px;
    animation: ball-spin-fade-loader 1s 0.24s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    animation: ball-spin-fade-loader 1s 0.36s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(5) {
    top: -25px;
    left: 0;
    animation: ball-spin-fade-loader 1s 0.48s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    animation: ball-spin-fade-loader 1s 0.6s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(7) {
    top: 0;
    left: -25px;
    animation: ball-spin-fade-loader 1s 0.72s infinite linear;
}

.ball-spin-fade-loader>div:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
    animation: ball-spin-fade-loader 1s 0.84s infinite linear;
}

@keyframes ball-spin-fade-loader {
    50% {
        opacity: 0.3;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes easeInOut {
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

.ball-scale-multiple {
    display: none
}

.ball-scale-multiple>div {
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    animation: ball-scale-multiple 1s 0s linear infinite;
}

.ball-scale-multiple>div:nth-child(2) {
    animation-delay: 0.2s;
}

.ball-scale-multiple>div:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

.loading_content {
    color: #fff;
    margin-top: 100px;
    font-size: 16px;
    letter-spacing: 1.5px;
    margin-left: -25px;
    animation: easeInOut 1.5s infinite linear;
}
